<template>
	<div class="articles">
		<div class="articles-wrapper" ref="articlesWrapper">
			<ul class="article" >
				<h4 v-if="fpTitle">{{fpTitle}}</h4>
				<h4 v-else-if="fpTitle && (articles.status == 5 || articles.status == 9) && uid == articles[0].source_id">{{fpTitle}}</h4>
				<h4 v-else-if="fpTitle && item.status == 9 && uid == item.source_id">{{fpTitle}}</h4>
				<li v-for="(item,index) in articles" class="article-list article-list-hook" :key='index'>
					<section>
						<img src="http://img-ugc-yt.luokuang.com/154453475181308406929.png" v-if="item.status == 5 || item.status == 9" alt="" class="notAllow">
						<h2>{{item.pub_time | formatDate}}</h2>
						<h3>{{item.position_name}}</h3>
					</section>
					<h1 class="title" v-if="item.title && (item.status == 5 || item.status == 9) && uid == item.source_id">{{item.title}}</h1>
					<h1 class="title" v-else-if="item.title && (item.status != 5 || item.status != 9)">{{item.title}}</h1>
					<ul ref='articleContent'>
						<li v-if="item.type == 2" class="article-item border-b-1px">
							<div class="oVideoImgWrap" style="position:relative;">
								<h6 class="article-video-img-wrap" v-if='item.status != 5 && item.status != 9'>
									<img v-if="item.imgs" :src="item.imgs[0]+'?iopcmd=thumbnail&type=13&width=750&height=459|iop|iopcmd=convert&dst=jpg&Q=40'" alt="" width="100%" @click='sendImageURL(item.imgs[0],"video")' class="article-img article-video-img" :id="item.imgs[0]" >
									<span class="oVideoIco"><img src="../common/img/play-ico.png" alt="" @click='sendImageURL(item.imgs[0],"video")'></span>
								</h6>
								<h6 class="article-video-img-wrap" v-else-if='item.status == 5 && uid == item.source_id'>
									<img v-if="item.imgs" :src="item.imgs[0]+'?iopcmd=thumbnail&type=13&width=750&height=459|iop|iopcmd=convert&dst=jpg&Q=40'" alt="" width="100%" @click='sendImageURL(item.imgs[0],"video")' class="article-img article-video-img" :id="item.imgs[0]" >
									<span class="oVideoIco"><img src="../common/img/play-ico.png" alt="" @click='sendImageURL(item.imgs[0],"video")'></span>
								</h6>
								<h6 class="article-video-img-wrap" v-else-if='item.status == 9 && uid == item.source_id'>
									<img v-if="item.imgs" :src="item.imgs[0]+'?iopcmd=thumbnail&type=13&width=750&height=459|iop|iopcmd=convert&dst=jpg&Q=40'" alt="" width="100%" @click='sendImageURL(item.imgs[0],"video")' class="article-img article-video-img" :id="item.imgs[0]" >
									<span class="oVideoIco"><img src="../common/img/play-ico.png" alt="" @click='sendImageURL(item.imgs[0],"video")'></span>
								</h6>																
							</div>
						</li>
						<li v-for="(article,index) in JSON.parse(item.content)" class="article-item border-b-1px article-item-inner" v-if="article.content || article.url" :key="index">
							<div class="content">
								
								<p class="desc" v-if="article.content">{{article.content}}</p>
								
								<img :src="[article.url+'?iopcmd=thumbnail&type=4&width=750|iop|iopcmd=convert&dst=jpg&Q=40']" alt="" class="article-img" width='100%' :height='getImgHeight(article.width,article.height)' :data-width='article.width' :data-height='article.height' @click='sendImageURL(article.url,"img")' v-if="article.url" :id="article.url" />
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="menu-wrapper" ref="menuWrapper">
			<ul>
				<li v-for="(item,index) in articles" :key="index" class="menu-item article-menu-hook" :class="{'current':currenIndex===index}" @click="selectMenu(index,$event)">
					<span class="text border-b-1px">
          	            {{item.pub_time | formatDate}}
          	            <label>{{item.position_name | filterChart}}</label>
						<div class="menu-item-img-wrap">
												<span class="menuNotAllow">
													
													 <img src="http://img-ugc-yt.luokuang.com/154453475181308406929.png" v-if="item.imgs && item.status == 5 && uid == item.source_id && item.imgs[0].indexOf('154452237636800702807') < 0" :alt="uid+item.source_id">
													<img src="http://img-ugc-yt.luokuang.com/154453475181308406929.png" v-else-if="item.imgs && item.status == 9 && uid == item.source_id && item.imgs[0].indexOf('154452237636800702807') < -1" :alt="uid+item.source_id">
													<img src="../common/img/blank.png" v-if="item.imgs && item.status == 5 && uid != item.source_id" alt="">
													<img src="../common/img/blank.png" v-else-if="item.imgs && item.status == 9 && uid != item.source_id" alt="">													
													<img src="../common/img/blank.png" v-else-if="!item.imgs && item.status == 9 && uid == item.source_id" alt="">
													<img src="../common/img/blank.png" v-else-if="!item.imgs && item.status == 5 && uid == item.source_id" alt="">
													<img src="../common/img/blank.png" v-else-if="!item.imgs && item.status == 9 && uid != item.source_id" alt="">
													<img src="../common/img/blank.png" v-else-if="!item.imgs && item.status == 5 && uid != item.source_id" alt="">												
												</span>
												
												 <img  v-if='item.imgs && item.imgs[0] && item.status != 5 && item.status != 9' :src="[item.imgs[0]+'?iopcmd=thumbnail&type=13&width=280&height=176|iop|iopcmd=convert&dst=jpg&Q=40']" alt="" class="menu-item-img" />
												<img  v-else-if='item.imgs && item.imgs[0] && item.status == 5 && uid == item.source_id' :src="[item.imgs[0]+'?iopcmd=thumbnail&type=13&width=280&height=176|iop|iopcmd=convert&dst=jpg&Q=40']" alt="" class="menu-item-img" />
												<img  v-else-if='item.imgs && item.imgs[0] && item.status == 9 && uid == item.source_id' :src="[item.imgs[0]+'?iopcmd=thumbnail&type=13&width=280&height=176|iop|iopcmd=convert&dst=jpg&Q=40']" alt="" class="menu-item-img" />		
												<img  v-else-if='item.imgs && !(item.imgs[0]) && item.status != 5 && item.status != 9' src="../common/img/default-img.png" alt="" class="menu-item-img"  />
												<img  v-else-if='!item.imgs && item.status != 5 && item.status != 9' src="../common/img/default-img.png" alt="" class="menu-item-img"  />
												<img  v-else src="http://img-ugc-yt.luokuang.com/154452237636800702807.png" alt="item.imgs[0]" class="menu-item-img"  /> 
												</div>
					</span>
				</li>
			</ul>
		</div>		
	</div>
</template>
<script>
	import BScroll from 'better-scroll';
	import {formatDate} from '../common/js/date.js' 
	const ERR_OK = 0; // 返回成功标志
	export default {
		data() {
			return {
				articles: [],
				listHeight: [], //保存分栏高度
				scrollY:0,      //滚动高度
				imgWidth:0,
				imgArry: [], //grallery图片JS
		    winWidth:0,
		    winHeight:0,
		    articleId:0,
				fpTitle:'',		
				uid:'',
			}
			
		},
		computed:{
			// 比较scroll 和 右边分栏高度，返回index
			currenIndex(){   
				for(let i=0;i<this.listHeight.length;i++){
					let height1=this.listHeight[i];
					let height2=this.listHeight[i+1];
					if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
					    let menuList=this.$refs.menuWrapper.getElementsByClassName('article-menu-hook');
						let el=menuList[i-4];
						this.menuScroll.scrollToElement(el,1000);							
						return i;
					}
				}
				return 0;
			}
		},
		created() {
			let id = this.$route.params.fpid;
			this.articleId = this.$route.params.articleid;
			this.uid = this.$route.params.uid;
			let serverUrl = "https://testriab.luokuang.com";
			this.axios.get(serverUrl + '/footprint/v1/h5_details?fp_id='+id+'&destnation=2',this.qs.stringify(),{
	          headers: {
	            'Content-Type': 'application/x-www-form-urlencoded'
	          }
	        })
	          .then(function(res){
				this.fpTitle = res.data.data.title;
				this.articles = res.data.data.items;
				console.log(this.articles);
				for(let i=0,len = this.articles.length;i<len;i++){
					console.log(JSON.parse(this.articles[i].content));
				}
					this.$nextTick(() => {
						this.imgWidth = this.$refs.articleContent[0].clientWidth;
						setTimeout(() => {
							this.initScroll();
							this.calculateHeight();		
							//把图片放入数组
							this.setImgIntoArray();
						},200);
						//内容区图片宽度
	
					});	            
	          }.bind(this))
	          .catch(function(err){
	            if(err.response) {
	              console.log(err.response)
	            }
	          }.bind(this))

		},
		methods: {
			initScroll() {
				let menuWrapper = this.$refs.menuWrapper;
				let articlesWrapper = this.$refs.menuWrapper;
				this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                    click:true  // 首先要使点击有效，因为 better-scroll将默认事件都阻止了
				});
				this.articlesScroll = new BScroll(this.$refs.articlesWrapper, {
					click:true,
                    probeType:3
				});
				//监控scroll事件，获取滚动高度
				this.articlesScroll.on("scroll",(pos)=>{
					this.scrollY=Math.abs(Math.round(pos.y));
				});
				
			},
			//将img数据存进数组
			setImgIntoArray() {
				let imgUrl = 0;
				let imgIndex = 0;
				console.log(this.uid+","+this.articles[0].source_id)
	        	for(let i=0;i<this.articles.length;i++){
							console.log(this.articles[i].status +","+ this.uid +","+ this.articles[0].source_id +","+ this.articles[i].imgs);
	        		let contentItems = JSON.parse(this.articles[i].content);
							if(contentItems.constructor === Array){//图片
								let mid = this.articles[mid];//暂无用
								
								for (let j = 0;j<contentItems.length;j++){
									if((this.articles[i].status == 5 || this.articles[i].status == 9) && this.uid ==this.articles[0].source_id){
										this.imgArry[imgIndex] = ({url:contentItems[j].url,type:0,img:contentItems[j].url,width:0,height:0});//type:img 0 video 1,img (封面图) 
										imgIndex++;										
									}else if(this.articles[i].status != 5 && this.articles[i].status != 9){
										this.imgArry[imgIndex] = ({url:contentItems[j].url,type:0,img:contentItems[j].url,width:0,height:0});//type:img 0 video 1,img (封面图) 
										imgIndex++;
									}
								}								
							}else{//视频
							
									if((this.articles[i].status == 5 || this.articles[i].status == 9) && this.uid ==this.articles[0].source_id){
											this.imgArry[imgIndex] = ({url:contentItems.url,type:1,img:this.articles[i].imgs[0],width:contentItems.video_width,height:contentItems.video_height});
											imgIndex++;										
									}else if(this.articles[i].status != 5 && this.articles[i].status != 9){
											this.imgArry[imgIndex] = ({url:contentItems.url,type:1,img:this.articles[i].imgs[0],width:contentItems.video_width,height:contentItems.video_height});
											imgIndex++;
									}								
															
							}

				}
			},
			//将右边每个分栏的高度存进数组
			
			calculateHeight() {
				let articleList = this.$refs.articlesWrapper.getElementsByClassName('article-list-hook');
		        let height=0;
		        
		        this.listHeight.push(height);
	        	for(let i=0;i<articleList.length;i++){
		        	let item =articleList[i];
		        	height += item.clientHeight;
		        	this.listHeight.push(height);
		        }
						console.log(this.listHeight);
			},
			selectMenu(index,$event){
				if(!event._constructed){
				  	return;
				}
			    let articleList=this.$refs.articlesWrapper.getElementsByClassName('article-list-hook');
				let el=articleList[index];
				this.articlesScroll.scrollToElement(el,500);
			},
			goMenu(index){
				// alert(index);
			    let articleList=this.$refs.articlesWrapper.getElementsByClassName('article-list-hook');
				let el=articleList[index];
				this.articlesScroll.scrollToElement(el,200);
			},			
			getImgHeight(imgW,imgH) {
				if(imgW == 0 || imgH == 0){
					return 200;
				}
				let imgHeight = (parseInt(this.imgWidth)/parseInt(imgW)) * parseInt(imgH);				
				return Math.ceil(imgHeight);
			},
			/*
			* 调用原生显示相册
			*/
			sendImageURL(url,Type){
				let This = this;
				let imgArryIndex = 0,sendJSON = {};
				for(let i in This.imgArry) {
					if(Type == 'img') {
						if(This.imgArry[i].url == url) imgArryIndex = i;
					}else{
						if(This.imgArry[i].img == url) imgArryIndex = i;
					}
				}

				sendJSON.index = imgArryIndex;
				sendJSON.entitys = This.imgArry;
				sendJSON = JSON.stringify(sendJSON);
				let ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)){
					try {
						window.webkit.messageHandlers.sendImageURLFP.postMessage(sendJSON);
					} catch(e) {
						console.log(e,'sendImageURL');
					}
				}else if (/android/.test(ua)){
					try {
						window.android.openImg(sendJSON)
					} catch(e) {
						console.log(e,'sendImageURL');
					}
				}
			}				
		},

		filters:{
	        formatDate(time){
	            let date = new Date(time);
	            return formatDate(date,'yyyy-MM-dd');
	        },
			filterChart: function (value) {
			if(value&& value.length > 4) {
			     value= value.substring(0,4)+ '...';
			    }
			     return value;
			  }	        
		},
		mounted () {
			let This = this;
			let i = 0;
			let olastImg = null;
			let timesRun  = 0;
			let timer = setInterval(function(){
				timesRun ++;
				console.log(This.imgArry.length);
				if(This.imgArry && This.imgArry.length > 0){
					olastImg = document.getElementById(This.imgArry[This.imgArry.length - 1].img);
					if(olastImg){
						if(olastImg.offsetHeight && olastImg.offsetHeight > 0){
							clearInterval(timer);
							setTimeout(function(){
							//计算最后一个内容高度
								let oAlhArray = document.getElementsByClassName('article-list-hook');
								console.log(oAlhArray);
								let lastContentHeight = oAlhArray[oAlhArray.length-1].offsetHeight;
								let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
								
								if(lastContentHeight < windowHeight/2) {
									let box = document.createElement('p');
									oAlhArray[oAlhArray.length-1].appendChild(box);
									let oP = oAlhArray[oAlhArray.length-1].getElementsByTagName('p')[0];
									oP.style.background = '#F0F0F0';
									oP.style.height =  windowHeight +'px';
									oP.style.position = 'absolute';
									oP.style.left = 0;
									oP.style.right = 0;
									oP.style.marginTop = "0.2rem";
									oAlhArray[oAlhArray.length-1].style.paddingBottom = windowHeight*0.9 +'px';
									
									//This.finishPullDown;
									//console.log(This.listHeight);
						
							}
							//gotomenu
							for(let i=0,len=This.articles.length;i<len;i++){
								if(This.articleId == This.articles[i].mid) 
								{
									console.log(i)
									This.goMenu(i);
								}
							}	

						},500);
						
						}
					}
				}
				if(timesRun === 50) clearInterval(timer);
			},50);

		},
		watch: {
        $route: {
          handler:function(val, oldVal){
            this.$nextTick(function(){  //页面加载完成后执行
              this.resetCopyright()
            })
          },
          // 深度观察监听
          deep: true
        }
      }
	};
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
	text-align: left;

}
body{font:100 .14rem/1.8 'sans-serif','microsoft yahei',verdana, geneva, arial, helvetica;}
.articles {
	display: flex;
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	overflow: hidden;
}
.menu-wrapper {
	flex: 0 0 1.8rem;
	width: 1.8rem;
	background: #F4F4F4;
}
.menu-wrapper .menu-item {
	display: table;
	height: 1.4rem;
	width: 1.41rem;
	padding: 0.16rem .2rem;
	line-height: .22rem;
	text-align: center;
	font-size: .22erm;
	border-left: .06rem #F4F4F4 solid;
	margin-bottom: 0.1rem;
}
.menu-wrapper .menu-item .menu-item-img-wrap{
	width:1.4rem;
	height:.88rem;
	overflow: hidden;
	position: relative;
}
.menu-wrapper .menu-item .menu-item-img-wrap .menuNotAllow{
	width:0.38rem;
	height: .34rem;
	position: absolute;
	z-index: 99999;
	right:.04rem;
	top:.04rem;
}
.menu-wrapper .menu-item .menu-item-img-wrap .menuNotAllow img{
	width:0.38rem;
	height: 0.34rem;
}
.menu-wrapper .menu-item .menu-item-img-wrap .menu-item-img {
	position: absolute;
	top:0;
	left:0;
	overflow: hidden;
	width:1.4rem;
}
.menu-wrapper .menu-item.current {
	position: relative;
	z-index: 10;
	margin-top: -1px;
	background: #fff;
	border-left: .06rem #41C364 solid;
}
.menu-wrapper .menu-item .text {
	font-size: .22rem;
	color: #222;
	display: block;
	text-align: center;

}
.menu-wrapper .menu-item .text label{
	display: block;
	text-align: center;
	overflow: hidden;
	height: .26rem;
	line-height: .26rem;	
	margin-bottom: .1rem;
	margin-top: .1rem;
	font-size: .18rem;
	color: #939393;
	padding-bottom: .08rem;
}

.menu-item-img .text {
	display: table-cell;
	vertical-align: middle;
	width: 56px;
	font-size: .22rem;

}
.articles-wrapper {
	flex: 1;
	background: #F0F0F0;
}
.articles-wrapper .title {
	line-height: .48rem;
	font-size: .32rem;
	color: #333;
	font-weight: normal;
	margin-bottom: .3rem;
}
.article-list {
	background: #fff;
	font-family: 'sans-serif','microsoft yahei',arial;
	font-size: .32rem;
	color: #333;
	line-height: .48rem;
}
.article-list-hook{
	padding:.4rem .2rem;
	margin-bottom: .2rem;
	position: relative;
}
.article-list .content{
	margin: 0rem;
	padding:0;
}
.article-list .content .desc{
	padding-bottom: .2rem;
	padding-top:.2rem;
}
.article-list section{
	position: relative;
}
.article-list section .notAllow{
	position: absolute;
	width:0.86rem;
	height:0.76rem;
	top:0;
	right:0.78rem;
}
.article-list section h2 {
	font-size: .36rem;
	line-height: .36rem;
	color: #1A1A1A;
	letter-spacing: 0;
	margin-bottom: .16rem;
	font-weight: normal;
}
.article-list section h3 {
	font-size: .24rem;
	line-height: .24rem;
	color: #666;
	letter-spacing: 0;
	background: url(../common/img/position-ico.png) no-repeat 0 0;
	background-size: .2rem .24rem;
	padding-left: .26rem;
	margin-bottom: .4rem;
	font-weight: normal;
}
.article-list section span {
	position: absolute;
	width:.46rem;
	height:.46rem;
	color: #B5B5B5;
	right:0;
	top:.1rem;
	overflow: hidden;
}
.article-list section span img{
	width:.46rem;
	height:.46rem;
}
.article h4{
	font-size:.32rem;
	font-weight: bold;
	color: #333;
	line-height: .48rem;
	margin-bottom: .2rem;
	background: #fff;
	padding:.3rem .2rem;
	font-family: 'sans-serif','microsoft yahei',arial;
}
.article-item {
	background: #fff;
}
.article-img {
	width: 5.3rem;
	margin: 0;
	display: block;
	background: #f7f5f5;
	padding:0;
	margin-top: -0.3rem;
}
.article-item h6{
	height: 3.24rem;
	width:5.3rem;
	overflow: hidden;
}
.article-item .article-video-img{display: block;}
.article-item .oVideoImgWrap{position: relative;margin-top: -0.2rem;}
.oVideoIco{width:.88rem;height: .88rem;position:absolute;left:50%;margin-left:-0.44rem;top:50%;margin-top:-0.44rem;}
.oVideoIco img{width:.88rem;height: .88rem;display: block;}
.comment-wrapper {
	display: none;
	margin-top: .2rem;
	background: #fff;
	padding-top: .4rem;
}
.comment-wrapper h2 {
	width: 2.24rem;
	height: .72rem;
	margin: 0 auto;
	border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border: 1px solid #D9D9D9;
	margin-bottom: .6rem;
}
.comment-wrapper h2 img {
	width: .72rem;
	height: .72rem;
	display: block;
	margin: 0 auto;
}
.comment-wrapper h3 {
	font-size: .32rem;
	color: #333333;
	letter-spacing: 0;
	line-height: .32rem;
	font-family: sans-serif,"microsoft yahei",verdana,arial;
	font-weight: normal;
	padding-left: .2rem;
	padding-bottom: .4rem;
}
.comment-wrapper ul {
	padding-left: .2rem;
}
.comment-wrapper ul li {
	position: relative;
	font-size: .3rem;
	color: #777777;
	letter-spacing: 0;
	line-height: .44rem;
	padding-left: .8rem;
	margin-bottom: .5rem;
}
.comment-wrapper ul li span {
	display: block;
	padding-bottom: .1rem;
}
.comment-wrapper ul li img {
	position: absolute;
	width: .48rem;
	height: .48rem;
	display: block;
	left: 0;
	top: 0;
	border-radius: .24rem;
	-webkit-border-radius: .24rem;
}
.comment-wrapper ul li p {
	margin-right: .2rem;
	color: #1A1A1A;
	font-size: .3rem;
}
.comment-wrapper ul li p.reply-comment {
	margin-top: .2rem;
	font-size: .26rem;
	line-height: .36rem;
	padding-top: .2rem;
	padding-bottom: .2rem;
	background: #F6F6F6;
	border-radius: .04rem;
	-webkit-border-radius: .04rem;
	padding-left: .2rem;
}
.comment-wrapper ul li p.reply-comment i {
	font-style: normal;
	color: #666;
}
.comment-wrapper ul li section {
	padding-top: .2rem;
}
.comment-wrapper ul li section i {
	float: right;
	padding-right: .1rem;
}
.comment-wrapper ul li section p {
	font-size: .24rem;
	color: #929292;
	letter-spacing: 0;
	line-height: .24rem;
}
.comment-wrapper ul li section p span {
	font-size: .26rem;
	color: #666666;
	letter-spacing: 0;
	line-height: .56rem;
	display: inline-block;
	background: #F2F2F2;
	border-radius: .24rem;
	-webkit-border-radius: .24rem;
	width: .84rem;
	height: .46rem;
	text-align: center;
	margin-left: .16rem;
}
.comment-wrapper h4 {
	font-size: .28rem;
	color: #777777;
	letter-spacing: 0;
	line-height: .28rem;
	font-weight: normal;
	padding-left: 1rem;
	padding-bottom: .6rem;
}
</style>